<template>
  <div class="customerConcern-container">
    <div class="customerConcern" style="background: #fff">
      <div class="customerConcern-item customerConcern-item-max">
        <div class="customerConcern-item-container">
          <div class="titleHeader setHeader space-between">
            <div>评论分析</div>
            <div>数据来自<span class="resoure">淘宝</span></div>
          </div>
          <div class="dataContainer">
            <div class="dataContainer-item discuss-container">
              <div class="discuss-item" :class="meassageShowInit == 'all' ? 'discuss-item-active' : ''" @click="switchDiscussInit('all')">
                <div class="discuss-num" v-text="commentCount.totalCommentCount">
                </div>
                <div class="discuss-desc">
                  全部评论
                </div>
              </div>
              <div class="discuss-item" :class="meassageShowInit == '正面' ? 'discuss-item-active' : ''" @click="switchDiscussInit('正面')">
                <div class="discuss-num" v-text="commentCount.positiveCommentCount">
                </div>
                <div class="discuss-desc">
                  正面评论
                </div>
              </div>
              <div class="discuss-item" :class="meassageShowInit == '负面' ? 'discuss-item-active' : ''" @click="switchDiscussInit('负面')">
                <div class="discuss-num" v-text="commentCount.negtiveCommentCount">
                </div>
                <div class="discuss-desc">
                  负面评论
                </div>
              </div>
              <div class="discuss-item" :class="meassageShowInit == '中性' ? 'discuss-item-active' : ''" @click="switchDiscussInit('中性')">
                <div class="discuss-num" v-text="commentCount.neutralCommentCount">
                </div>
                <div class="discuss-desc">
                  中性评论
                </div>
              </div>
            </div>
            <div class="dataContainer-item">
              <div class="titleHeader space-between discussSet">
                <div class="discussSet-item discussSet-type">正负面</div>
                <div class="discussSet-item discussSet-info">评论信息</div>
                <div class="discussSet-item discussSet-issue">关注点</div>
              </div>
            </div>
            <div class="dataContainer-item discuss-sum-detail">
              <div class="discuss-detail" v-for="(item,index) in discussCommentInit" :key="index">
                <div class="discuss-detail-item discuss-detail-type">
                  <div class="discuss-detail-circle" v-text="item.sentimentType">
                  </div>
                </div>
                <div class="discuss-detail-item discuss-detail-content">
                  <div class="detail-content-item content-item-desc" v-text="item.sentimentComment">
                  </div>
                  <div class="detail-content-item content-item-images" v-if="item.esntimentPicture.length > 0">
                    <div class="imgSrc" v-for="(src,idx) in item.esntimentPicture" :key="idx">
                      <img :src="src" alt="">
                    </div>
                  </div>
                  <div class="detail-content-item content-item-info space-between">
                    <div class="item-info item-info-content">
                      <div class="info-content-item info-content-brand">
                        <div class="info-content-item-name">品牌:</div>
                        <div class="" v-text="item.brand"></div>
                      </div>
                      <div class="info-content-item info-content-model">
                        <div class="info-content-item-name">产品型号:</div>
                        <div class="" v-text="item.productCode"></div>
                      </div>
                    </div>
                    <div class="item-info item-info-time">
                      <div class="info-time" v-text="item.time"></div>
                    </div>
                  </div>
                </div>
                <div class="discuss-detail-item discuss-detail-issue">
                  <div v-text="item.focuxPoint"></div>
                </div>
              </div>
            </div>
            <div class="dataContainer-item paginationSet" style="border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;">
              <div class="pagination-container">
                <div class="toStart" @click="handleCurChange(1)">首页</div>
                <el-pagination background layout="prev, pager, next"
                               @current-change="handleCurChange"
                               :current-page.sync="commentCountMessage.currentPage"
                               :total="commentCountMessage.totalRecord">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="customerConcern-item customerConcern-item-small">
        <div class="customerConcern-item-container">
          <div class="titleHeader" style="background: white;border-top-right-radius: 4px;border-top-left-radius: 4px;">
            评论关注排名
          </div>
          <div class="range">
            <el-table :data="discussCareRank" class="setHeight" style="width: 100%">
              <el-table-column
                type="index"
                label="排名"
                width="80px"
                :index="indexMethod">
              </el-table-column>
              <el-table-column
                prop="focusName"
                label="关注点"
                width="100">
              </el-table-column>
              <el-table-column
                prop="referralRate"
                label="提及率"
                width="100">
              </el-table-column>
              <el-table-column
                label="评论数">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="commentRowSet(scope.row)"
                     style="font-size: 14px;padding: 0 15px;">{{scope.row.focusNum}}条</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!--  评论数Dialog-->
    <div class="dialog-container">
      <div class="comment-dialog-container">
        <el-dialog class="saleMarketRight" title="渠道-品牌-产品-关注点详情" width="80%" top="8vh"
             :visible.sync="commentDialogVisible" append-to-body>
            <div class="dataContainer">
              <div class="dataContainer-item discuss-container">
                <div class="discuss-item" :class="meassageShowInitCare == 'all' ? 'discuss-item-active' : ''" @click="switchDiscussInitCare('all')">
                  <div class="discuss-num" v-text="commentCountCare.totalCommentCount">
                  </div>
                  <div class="discuss-desc">
                    全部评论
                  </div>
                </div>
                <div class="discuss-item" :class="meassageShowInitCare == '正面' ? 'discuss-item-active' : ''" @click="switchDiscussInitCare('正面')">
                  <div class="discuss-num" v-text="commentCountCare.positiveCommentCount">
                  </div>
                  <div class="discuss-desc">
                    正面评论
                  </div>
                </div>
                <div class="discuss-item" :class="meassageShowInitCare == '负面' ? 'discuss-item-active' : ''" @click="switchDiscussInitCare('负面')">
                  <div class="discuss-num" v-text="commentCountCare.negtiveCommentCount">
                  </div>
                  <div class="discuss-desc">
                    负面评论
                  </div>
                </div>
                <div class="discuss-item" :class="meassageShowInitCare == '中性' ? 'discuss-item-active' : ''" @click="switchDiscussInitCare('中性')">
                  <div class="discuss-num" v-text="commentCountCare.neutralCommentCount">
                  </div>
                  <div class="discuss-desc">
                    中性评论
                  </div>
                </div>
              </div>
              <div class="dataContainer-item">
                <div class="titleHeader space-between discussSet">
                  <div class="discussSet-item discussSet-type">正负面</div>
                  <div class="discussSet-item discussSet-info">评论信息</div>
                  <div class="discussSet-item discussSet-issue">关注点</div>
                </div>
              </div>
              <div class="dataContainer-item discuss-sum-detail">
                <div class="discuss-detail" v-for="(item,index) in discussCommentInitCare" :key="index">
                  <div class="discuss-detail-item discuss-detail-type">
                    <div class="discuss-detail-circle" v-text="item.sentimentType">
                    </div>
                  </div>
                  <div class="discuss-detail-item discuss-detail-content">
                    <div class="detail-content-item content-item-desc" v-text="item.sentimentComment">
                    </div>
                    <div class="detail-content-item content-item-images" v-if="item.esntimentPicture.length > 0">
                      <div class="imgSrc" v-for="(src,idx) in item.esntimentPicture" :key="idx">
                        <img :src="src" alt="">
                      </div>
                    </div>
                    <div class="detail-content-item content-item-info space-between">
                      <div class="item-info item-info-content">
                        <div class="info-content-item info-content-brand">
                          <div class="info-content-item-name">品牌:</div>
                          <div class="" v-text="item.brand"></div>
                        </div>
                        <div class="info-content-item info-content-model">
                          <div class="info-content-item-name">产品型号:</div>
                          <div class="" v-text="item.productCode"></div>
                        </div>
                      </div>
                      <div class="item-info item-info-time">
                        <div class="info-time" v-text="item.time"></div>
                      </div>
                    </div>
                  </div>
                  <div class="discuss-detail-item discuss-detail-issue">
                    <div v-text="item.focuxPoint"></div>
                  </div>
                </div>
              </div>
              <div class="dataContainer-item paginationSet" style="border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;">
                <div class="pagination-container">
                  <div class="toStart" @click="handleCurChangeCare(1)">首页</div>
                  <el-pagination background layout="prev, pager, next"
                                 @current-change="handleCurChangeCare"
                                 :current-page.sync="commentCountMessageCare.currentPage"
                                 :total="commentCountMessageCare.totalRecord">
                  </el-pagination>
                </div>
              </div>
            </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapActions, mapGetters, mapMutations } from 'vuex'
  import * as opreate from 'api/getData'

  export default {
      name: "customer-concern",
      computed:{
        ...mapGetters(["commentCountMessage","discussCommentInit","commentCount","productCode","discussCareRank"])
      },
      data() {
          return {
            meassageShowInit: 'all',
            meassageShowInitCare: 'all',
            commentDialogVisible: false,
            commentCountMessageCare: {},
            discussCommentInitCare: {},
            commentCountCare: {},
            focusNameSet: ''
          }
      },
      mounted() {

      },
      methods: {
        ...mapActions(["obtainCustomerConcern", "obtainCommentCount"]),
        indexMethod(index){
          return (index+1)
        },
        handleCurChangeCare(pageNumber){
          this.mineSetData({ pageNumber, productCode: this.productCode, focusName: this.focusNameSet, sentimentType: this.meassageShowInit })
        },
        handleCurChange(pageNumber){
          this.obtainCustomerConcern({ pageNumber, productCode: this.productCode, sentimentType: this.meassageShowInit })
        },
        commentRowSet(rowSet){
          const { focusName } = rowSet
          this.focusNameSet = focusName
          const productCode = this.productCode
          Promise.all([opreate.getCommentCountMessage({ productCode, focusName, sentimentType: 'all' }),opreate.getCommentCount({ productCode, focusName })]).then(results => {
            let { currentPage, totalRecord, list } = results[0].data || {}
            this.commentCountMessageCare = { currentPage: currentPage || 0, totalRecord: totalRecord || 0 }
            this.discussCommentInitCare = list ? list.map(v => {
              let item = v
              item.sentimentType = item.sentimentType.substr(0,1)
              item.esntimentPicture = item.esntimentPicture.split(',')
              item.focuxPoint = item.focuxPoint.join(',')
              return item
            }) : []
            this.commentCountCare = results[1].data
          })
          this.commentDialogVisible = true
        },
        switchDiscussInit(newVal){
          this.meassageShowInit = newVal
          this.obtainCustomerConcern({ productCode:this.productCode, sentimentType: newVal })
        },
        switchDiscussInitCare(newVal){
          this.meassageShowInitCare = newVal
          const { focusName } = this.commentCountCare
          this.mineSetData({ focusName, productCode: this.productCode, sentimentType: newVal })
        },
        mineSetData(params = {}){
          opreate.getCommentCountMessage(params).then(res => {
            let { currentPage, totalRecord, list } = res.data || {}
            this.commentCountMessageCare = { currentPage: currentPage || 0, totalRecord: totalRecord || 0 }
            this.discussCommentInitCare = list ? list.map(v => {
              let item = v
              item.sentimentType = item.sentimentType.substr(0,1)
              item.esntimentPicture = item.esntimentPicture.split(',')
              item.focuxPoint = item.focuxPoint.join(',')
              return item
            }) : []
          })
        }
      }
  }
</script>

<style scoped>
  .customerConcern{
    display: flex;
  }
  .customerConcern-item-max{
    display: flex;
    flex: 5;
  }
  .customerConcern-item-small{
    display: flex;
    flex: 2;
    justify-content: flex-end;
  }
  .customerConcern-item-container{
    width: 98%;
    border-radius: 4px;
    border: 1px solid #E0E8EF;
  }
  .resoure{
    color: #409EFF;
  }
  .titleHeader{
    font-weight: bold;
  }
  .dataContainer{
    display: flex;
    flex-direction: column;
  }
  .discuss-container{
    display: flex;
    padding: 15px;
    background: white;
  }
  .discuss-item{
    height: 72px;
    padding: 10px 40px 10px 15px;
    display: flex;
    flex-direction: column;
    background: #E5ECF3;
    border-radius: 5px;
    width: 18%;
    margin: 0 10px;
    cursor: pointer;
    font-weight: bold;
  }
  .discuss-item:first-child{
    margin-left: 0px;
  }
  .discuss-item-active{
    background:linear-gradient(90deg,rgba(5,215,229,1) 0%,rgba(3,169,244,1) 100%);
    color: white;
  }
  .discuss-num{
    flex: 1;
  }
  .discussSet{
    padding: 0px;
  }
  .discussSet-item{
    display: flex;
    justify-content: center;
  }
  .discussSet-type{
    width: 72px;
  }
  .discussSet-info{
    flex: 1;
  }
  .discussSet-issue{
    width: 144px;
  }
  .discuss-sum-detail,discuss-detail-content{
    display: flex;
    flex-direction: column;
    background: white;
  }
  .discuss-detail{
    display: flex;
    border-bottom: 1px solid #E5ECF3;
  }
  .detail-content-item,.item-info,.info-content-item{
    display: flex;
  }
  .discuss-detail-type,.discuss-detail-circle{
    width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .discuss-detail-type{
    width: 72px;
  }
  .discuss-detail-circle{
    border-radius: 30px;
    background: #3BD0DD;
    color: white;
    height: 30px;
    width: 30px;
  }
  .discuss-detail-content{
    flex: 1;
    border-left: 1px solid #E5ECF3;
    border-right: 1px solid #E5ECF3;
    padding: 10px 15px 10px 25px;
    min-height: 90px;
  }
  .content-item-desc{
    margin-bottom: 10px;
  }
  .content-item-info{
    margin-top: 10px;
  }
  .discuss-detail-issue{
    width: 144px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    font-weight: bold;
  }
  .imgSrc{
    padding: 6px 5px;
    border: 1px solid #E0E8EF;
    margin: 0 10px;
  }
  .imgSrc:first-child{
    margin-left: 0;
  }
  .imgSrc img{
    width: 45px;
    height: 45px;
  }
  .info-content-item{
    margin-right: 10px;
  }
  .info-content-item-name{
    margin-right: 4px;
  }

  /**
  * @desc: This is Note
  * 渠道-品牌-产品-关注点详情CSS
  * @author: WJ
  * @date: 2018/09/30 17:18:26
  **/
</style>
